<template>
  <div class="container" style="width:100%;height:400px;border:1px solid #ccc">
    <!--树结构-->
    <Tree :data="tree" @on-select-change="changeTree" style="position:absolute;top:50px;left:30px;"></Tree>
    <div style="position:absolute;top:30px;left:330px;margin-left:50px;width:62%;">
            <!--<Button style="margin:0 10px 10px 0" type="primary" @click="modalAdd = true">添加</Button>-->
            <Button style="margin:0 10px 10px 0" type="error" @click="removes">删除多个</Button>
            <!--搜索框-->
            <Input v-model="filter.originalname">
                <Button slot="append" icon="ios-search" @click="searchData"></Button>
            </Input>
            <!--表格-->
            <Table ref="selection" @on-selection-change="onSelectionChangeHandler" border :columns="columns" :data="data"></Table>
            <!--分页-->
            <Page :total="total" :page-size="filter.rows" :page-size-opts="[2,4,6,8,10]" @on-page-size-change="onPageSizeChangeHandler" @on-change="onChangeHandler" show-sizer></Page>
            <!--添加修改信息的弹框-->
            
        </div>
    <Upload
        style="width:200px;position:absolute;top:120px;left:150px;"
        multiple
        type="drag"
        name="avatar"
        :action="getUrl">
        <div style="padding: 20px 0">
            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
            <p>点击或者拖拽至此处上传</p>
        </div>
    </Upload>
  </div>
</template>
<script>
    export default{
    data () {
        return {
            modalAdd:false,
            type:3,
            requestURL : `http://localhost:3000/uploadFile/img`,
            editId:0,
            data: [],
            total:0,
            tree: [],
            ids:[],
            filter:{
                page:1,
                rows:4,//每页显示几条数据
                name:"",
                originalname:"",
                cateId:"",
            },
            columns: [
              {
                //单选框
                type: "selection",
                width: 60,
                align: "center"
              },
              {
                //用户模块中的用户姓名
                title: "照片名称",
                key: "originalname"
              },
              {
                //用户模块中的用户密码
                title: "照片格式",
                key: "mimetype"
              },
              {
                //用户模块中的操作（修改和删除）
                title: "操作",
                key: "action",
                width: 150,
                align: "center",
                render: (h, params) => {
                  return h("div", [
                    h(
                      "Button",
                      {
                        props: {
                          type: "primary",
                          size: "small"
                        },
                        style: {
                          marginRight: "5px"
                        },
                        on: {
                          click: () => {
                            this.editData(params.row._id);
                          }
                        }
                      },
                      "修改"
                    ),
                    h(
                      "Button",
                      {
                        props: {
                          type: "error",
                          size: "small"
                        },
                        on: {
                          click: () => {
                            this.remove(params.row._id); //这里的params.row._id就是当前点击的用户信息的id
                          }
                        }
                      },
                      "删除"
                    )
                  ]);
                }
              }
            ]
        };
    },
    methods: {
        //删除单条数据数据操作
        remove (id) {
            this.$Modal.confirm({
                title: '删除确认对话框',
                content: '<p>是否确认删除该条信息？</p>',
                onOk: () => {
                    fetch(`http://localhost:3000/uploadFile/data/${id}`,{
                        method:'delete',
                    }).then(res=>{
                        return res.json();
                    }).then(data=>{
                        this.$Message.info('已删除');
                        this.getData();
                    });   
                },
                onCancel: () => {
                    this.$Message.info('已取消删除');
                }
            });
        },
        //删除多个
        removes(){
            this.$Modal.confirm({
                title: '删除确认对话框',
                content: '<p>是否确认删除选中的信息？</p>',
                onOk: () => {
                    fetch('http://localhost:3000/uploadFile/removes',{
                        method:'post',
                        headers:{
                            'Content-Type':'application/json'
                        },
                        body:JSON.stringify({ids:this.ids})
                    }).then(res=>{
                        return res.json();
                    }).then(data=>{
                        this.$Message.info('选中的信息已删除');
                        this.getData();
                    });   
                },
                onCancel: () => {
                    this.$Message.info('已取消删除');
                }
            });
        },
        //将选中的多个数据的id存在ids里面
        onSelectionChangeHandler(selection){
            var selectionIds = [];
            for(let i=0;i<selection.length;i++){
                selectionIds.push(selection[i]._id);
            }
            this.ids = selectionIds;
            //console.log(this.ids);
        },
        //获取用户数据
        getData(){//定义获取数据库的方法
            var bodyString= JSON.stringify(this.filter);//这里把filter里面的信息转成字符串形式存下来
            //console.log(bodyString);
            fetch('http://localhost:3000/uploadFile/list',{
                method:'post',
                headers:{
                    'Content-Type':"application/json"
                },
                body:bodyString//前台定义的数据传到后台去
            }).then(res=>{
                    return res.json();
                }).then(data=>{
                    //console.log(data)
                    this.data = data.rows;//这里赋值后台返回的数据。rows代表数据库里面的所有数据，total是分页里面的参数
                    this.total = data.total;
                    //console.log(data.rows)
                });
        },
        //分页操作
        onChangeHandler(page){
            this.filter.page = page;//获取分页参数，第几页
            this.getData();
        },
        onPageSizeChangeHandler(pageSize){
            //console.log(pageSize);
            this.filter.rows = pageSize;//获取一页显示几个
            this.getData();
        },
        //搜索功能
        searchData(){
            this.getData();
        },
        //树结构点击获取信息
        changeTree(ev){
            //console.log(ev);
            this.filter.cateId = ev[0]._id;
            this.getData();
        },
        //获取树结构的信息
        getTree(){
            fetch(`http://localhost:3000/cate/list/${this.type}`,{
                method:'get',
                headers:{
                    "Content-Type":"application/json"
                },
            }).then(res=>{
                return res.json();
            }).then(data=>{
                this.tree = data;
                //console.log(data)
            })
        }
    },
    computed:{
        getUrl(){
          return  this.requestURL
        }
    },
    created(){//钩子函数里面调用上面定义的获取数据的方法
        this.getData();
        this.getTree();
    },
}


// import { base } from "../common/base";
//       export default {
//         mixins: [base],
//             data(){
//               return {
//                 modules: "album",
//                 type:3,
//                 requestURL : `http://localhost:3000/uploadFile/img`
//               }
//             },
//             computed:{
//               getUrl(){
//                 return  this.requestURL
//               }
//             }
//       }
</script>
